<template>
  <div class="dashboard">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle bg-circle-1"></div>
      <div class="bg-circle bg-circle-2"></div>
      <div class="bg-circle bg-circle-3"></div>
    </div>
    
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <div class="logo-section">
            <div class="logo-icon">🚀</div>
            <h1>DayDayUp</h1>
          </div>
            <div class="user-info">
            <span class="welcome-text" @click="showInviteDialog = true">
              欢迎，{{ authStore.user?.username }}
              <el-tag v-if="authStore.isAdmin" type="success" size="small" style="margin-left: 8px;" @click="handleLogout">
                管理员
              </el-tag>
            </span>
            <!-- 管理员专属退出按钮 -->
            <!-- <el-icon v-if="authStore.isAdmin" size="20" color="#f56c6c" @click="handleLogout"><CircleCloseFilled/></el-icon> -->
            <!-- 普通用户退出按钮 -->
            <!-- <el-button v-else type="text" class="logout-btn" @click="handleLogout"> 退出</el-button> -->
              <el-button v-if="!authStore.isAdmin" type="text" class="logout-btn" @click="handleLogout"> 退出</el-button>
          </div>
        </div>
      </el-header>
      
      <el-main class="main">
        <!-- 欢迎横幅 -->
        <!-- <div class="welcome-banner">
          <div class="banner-content">
            <h2>开启您的美好一天 ✨</h2>
            <p>选择您需要的功能，让每一天都充满意义</p>
          </div>
        </div> -->
        
        <div class="feature-grid">
            <el-card 
            class="feature-card" 
            @click="$router.push('/work')"
            shadow="hover"
          >
            <div class="feature-icon work-icon">
              <el-icon size="48"><Briefcase /></el-icon>
            </div>
            <h3>工作</h3>
            <p>查看上下班时间和工作时间安排</p>
            <div class="card-hover-effect"></div>
          </el-card>
          
         <el-card 
            class="feature-card" 
            @click="$router.push('/timer')"
            shadow="hover"
          >
            <div class="feature-icon timer-icon">
              <el-icon size="48"><Timer /></el-icon>
            </div>
            <h3>计时</h3>
            <p>正计时功能，记录您的工作时间</p>
            <div class="card-hover-effect"></div>
          </el-card>

     

           <el-card 
            class="feature-card" 
            @click="$router.push('/calendar')"
            shadow="hover"
          >
            <div class="feature-icon calendar-icon">
              <el-icon size="48"><Calendar /></el-icon>
            </div>
            <h3>日历</h3>
            <p>查看和管理您的日程安排</p>
            <div class="card-hover-effect"></div>
          </el-card>

        <el-card 
            class="feature-card" 
            @click="$router.push('/inner')"
            shadow="hover"
          >
            <div class="feature-icon inner-icon">
              <el-icon size="48"><MoonNight /></el-icon>
            </div>
            <h3>内心</h3>
            <p>记录您的心路历程和内心世界</p>
            <div class="card-hover-effect"></div>
          </el-card>

          <el-card 
            class="feature-card" 
            @click="$router.push('/notes')"
            shadow="hover"
          >
            <div class="feature-icon notes-icon">
              <el-icon size="48"><Edit /></el-icon>
            </div>
            <h3>笔记</h3>
            <p>管理您的笔记和想法</p>
            <div class="card-hover-effect"></div>
          </el-card>


       


               <el-card 
          class="feature-card" 
          @click="$router.push('/countdown-days')"
          shadow="hover"
        >
          <div class="feature-icon countdown-days-icon">
            <!-- <el-icon size="48"><Calendar /></el-icon> -->
            <el-icon size="48"><Flag /></el-icon>
          </div>
          <h3>倒数日</h3>
          <p>管理重要日期和事件倒计时</p>
          <div class="card-hover-effect"></div>
        </el-card>

          

        
          
         

            <el-card 
          class="feature-card" 
          @click="$router.push('/countdown')"
          shadow="hover"
        >
          <div class="feature-icon countdown-icon">
            <el-icon size="48"><Clock /></el-icon>
          </div>
          <h3>倒计时</h3>
          <p>设置倒计时，提醒重要事项</p>
          <div class="card-hover-effect"></div>
        </el-card>

        

          <el-card 
            class="feature-card UploadFilled-card" 
            shadow="hover"
          >
            <div class="feature-icon UploadFilled-icon">
              <el-icon size="48"><UploadFilled /></el-icon>
            </div>
            <h3>更新</h3>
            <p>更多好用好玩的功能，尽请期待..</p>
            <div class="card-hover-effect"></div>
          </el-card>
        </div>
        
        <div class="today-summary">
          <el-card class="summary-card">
            <template #header>
              <div class="summary-header">
                <span class="summary-title">📊 今日概览</span>
                <el-button type="text" class="refresh-btn" @click="refreshTodayData">
                  <el-icon><Refresh /></el-icon>
                  刷新
                </el-button>
              </div>
            </template>
            <div class="summary-content">
              <div class="summary-item">
                <span class="label">今日总计时间：</span>
                <span class="value">{{ formatTime(todayTotalTime) }}</span>
              </div>
              <div class="summary-item">
                <span class="label">当前时间：</span>
                <span class="value">{{ currentTime }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
    
    <!-- 悬浮主题切换按钮 -->
    <ThemeToggle />
    
    <!-- 邀请码对话框 -->
    <el-dialog 
      v-model="showInviteDialog" 
      title="邀请新用户" 
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="invite-content">
        <!-- 管理员控制全局邀请开关 -->
        <div v-if="authStore.isAdmin" class="admin-section">
          <h4>管理员控制</h4>
          <div class="admin-control">
            <span>允许所有用户生成邀请码：</span>
            <el-switch
              v-model="globalInviteEnabled"
              @change="toggleGlobalInvite"
              :loading="updatingGlobalSetting"
            />
          </div>
          <el-alert
            v-if="globalInviteEnabled"
            title="当前所有用户都可以生成邀请码"
            type="success"
            :closable="false"
            show-icon
          />
          <el-alert
            v-else
            title="当前只有管理员可以生成邀请码"
            type="warning"
            :closable="false"
            show-icon
          />
        </div>
        
        <el-divider v-if="authStore.isAdmin" />
        
        <div class="invite-section">
          <h4>生成新邀请码</h4>
          <el-button 
            type="primary" 
            @click="generateInviteCode"
            :loading="generating"
            :disabled="!canGenerateInvite"
          >
            {{ generateButtonText }}
          </el-button>
          <div v-if="!canGenerateInvite && !authStore.isAdmin" class="invite-disabled">
            <el-alert
              title="当前不允许生成邀请码，请联系管理员"
              type="info"
              :closable="false"
              show-icon
            />
          </div>
          <div v-if="newInviteCode" class="new-invite-code">
            <p>新生成的邀请码：</p>
            <el-input 
              v-model="newInviteCode" 
              readonly 
              size="large"
            >
              <template #append>
                <el-button @click="copyInviteCode">复制</el-button>
              </template>
            </el-input>
          </div>
        </div>
        
        <el-divider />
        
        <div class="invite-section">
          <h4>我的邀请列表</h4>
          <el-table :data="inviteCodes" style="width: 100%">
            <el-table-column prop="code" label="邀请码" width="200">
              <template #default="scope">
                <div style="display: flex; align-items: center; gap: 8px;">
                  <span>{{ scope.row.code }}</span>
                  <el-button 
                    type="text" 
                    size="small" 
                    @click="copyTableInviteCode(scope.row.code)"
                    :disabled="scope.row.is_used"
                  >
                    复制
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" width="150">
              <template #default="scope">
                {{ formatDate(scope.row.created_at) }}
              </template>
            </el-table-column>
            <el-table-column prop="is_used" label="状态" width="80">
              <template #default="scope">
                <el-tag :type="scope.row.is_used ? 'success' : 'warning'">
                  {{ scope.row.is_used ? '已使用' : '未使用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="used_by_username" label="使用者" />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../stores/auth'
// import axios from 'axios'
// 新写法（自动适配环境）
import request from '../utils/request'
import * as Icons from '@element-plus/icons-vue'
// console.log('所有可用图标:', Object.keys(Icons)) // 在控制台搜索心形相关关键词
import { Flag,Calendar, Edit, Timer, Clock, MoonNight, UserFilled, Refresh, UploadFilled, Briefcase } from '@element-plus/icons-vue'
import ThemeToggle from '../components/ThemeToggle.vue'

const router = useRouter()
const authStore = useAuthStore()
const todayTotalTime = ref(0)
const currentTime = ref('')
const showInviteDialog = ref(false)
const generating = ref(false)
const newInviteCode = ref('')
const inviteCodes = ref([])
const globalInviteEnabled = ref(false)
const updatingGlobalSetting = ref(false)
let timeInterval = null

const formatTime = (seconds) => {
  if (!seconds) return '0小时0分钟'
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return `${hours}小时${minutes}分钟`
}

const updateCurrentTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN')
}

const refreshTodayData = async () => {
  try {
    const response = await  request.get('/timer/today/total')
    todayTotalTime.value = response.data.totalTime
  } catch (error) {
    console.error('获取今日数据失败:', error)
  }
}

const handleLogout = () => {
  authStore.logout()
  ElMessage.success('已退出登录')
  router.push('/login')
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 计算属性
const canGenerateInvite = computed(() => {
  return authStore.isAdmin || globalInviteEnabled.value
})

const generateButtonText = computed(() => {
  if (authStore.isAdmin) {
    return '生成邀请码'
  }
  return globalInviteEnabled.value ? '生成邀请码' : '等待管理员开启'
})

const generateInviteCode = async () => {
  try {
    generating.value = true
    const response = await  request.post('/invite/generate')
    newInviteCode.value = response.data.inviteCode
    ElMessage.success('邀请码生成成功')
    loadInviteCodes()
  } catch (error) {
    ElMessage.error('生成邀请码失败')
  } finally {
    generating.value = false
  }
}

const copyInviteCode = async () => {
  try {
    // 优先尝试 Clipboard API
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(newInviteCode.value);
      ElMessage.success('邀请码已复制到剪贴板');
      return;
    }
    
    // 降级方案1：使用 document.execCommand
    const textArea = document.createElement('textarea');
    textArea.value = newInviteCode.value;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    textArea.style.top = '-9999px';
    textArea.style.opacity = '0';
    textArea.style.zIndex = '-9999';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    const successful = document.execCommand('copy');
    document.body.removeChild(textArea);
    
    if (successful) {
      ElMessage.success('邀请码已复制到剪贴板');
    } else {
      // 降级方案2：尝试使用 selection API
      try {
        const range = document.createRange();
        const selection = window.getSelection();
        textArea.style.position = 'absolute';
        textArea.style.left = '0';
        textArea.style.top = '0';
        textArea.style.opacity = '0';
        document.body.appendChild(textArea);
        range.selectNodeContents(textArea);
        selection.removeAllRanges();
        selection.addRange(range);
        textArea.setSelectionRange(0, textArea.value.length);
        
        const successful2 = document.execCommand('copy');
        document.body.removeChild(textArea);
        
        if (successful2) {
          ElMessage.success('邀请码已复制到剪贴板');
        } else {
          showManualCopyDialog(newInviteCode.value);
        }
      } catch (error2) {
        document.body.removeChild(textArea);
        showManualCopyDialog(newInviteCode.value);
      }
    }
  } catch (error) {
    // console.log('复制失败:', error);
    showManualCopyDialog(newInviteCode.value);
  }
};

// 手动复制对话框
const showManualCopyDialog = (code) => {
  ElMessage({
    message: `邀请码：${code}，请手动复制`,
    type: 'info',
    duration: 5000,
    showClose: true
  });
};

// 复制表格中的邀请码
const copyTableInviteCode = async (code) => {
  try {
    // 优先尝试 Clipboard API
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(code);
      ElMessage.success('邀请码已复制到剪贴板');
      return;
    }
    
    // 降级方案1：使用 document.execCommand
    const textArea = document.createElement('textarea');
    textArea.value = code;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    textArea.style.top = '-9999px';
    textArea.style.opacity = '0';
    textArea.style.zIndex = '-9999';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    const successful = document.execCommand('copy');
    document.body.removeChild(textArea);
    
    if (successful) {
      ElMessage.success('邀请码已复制到剪贴板');
    } else {
      // 降级方案2：尝试使用 selection API
      try {
        const range = document.createRange();
        const selection = window.getSelection();
        textArea.style.position = 'absolute';
        textArea.style.left = '0';
        textArea.style.top = '0';
        textArea.style.opacity = '0';
        document.body.appendChild(textArea);
        range.selectNodeContents(textArea);
        selection.removeAllRanges();
        selection.addRange(range);
        textArea.setSelectionRange(0, textArea.value.length);
        
        const successful2 = document.execCommand('copy');
        document.body.removeChild(textArea);
        
        if (successful2) {
          ElMessage.success('邀请码已复制到剪贴板');
        } else {
          showManualCopyDialog(code);
        }
      } catch (error2) {
        document.body.removeChild(textArea);
        showManualCopyDialog(code);
      }
    }
  } catch (error) {
    // console.log('复制失败:', error);
    showManualCopyDialog(code);
  }
};

const loadInviteCodes = async () => {
  try {
    const response = await  request.get('/invite/list')
    inviteCodes.value = response.data.inviteCodes
  } catch (error) {
    ElMessage.error('获取邀请码列表失败')
  }
}

// 加载全局邀请设置
const loadGlobalInviteSettings = async () => {
  try {
    const response = await request.get('/invite-settings')
    globalInviteEnabled.value = response.data.settings.allow_all_users_invite === 1
  } catch (error) {
    console.error('获取全局邀请设置失败:', error)
  }
}

// 切换全局邀请开关
const toggleGlobalInvite = async (value) => {
  if (!authStore.isAdmin) return
  
  try {
    updatingGlobalSetting.value = true
    await request.put('/admin/invite-settings', {
      allowAllUsersInvite: value
    })
    globalInviteEnabled.value = value
    ElMessage.success(value ? '已开启所有用户邀请权限' : '已关闭所有用户邀请权限')
  } catch (error) {
    ElMessage.error('更新设置失败')
    globalInviteEnabled.value = !value // Revert on error
  } finally {
    updatingGlobalSetting.value = false
  }
}

onMounted(() => {
  updateCurrentTime()
  refreshTodayData()
  loadGlobalInviteSettings()
  timeInterval = setInterval(updateCurrentTime, 1000)
})

// 监听邀请码对话框打开
watch(showInviteDialog, (newVal) => {
  if (newVal) {
    loadInviteCodes()
  }
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background-color: var(--bg-primary);
  position: relative; /* For background decoration positioning */
  overflow: hidden; /* Hide overflow for background circles */
}

/* Background decoration styles */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure it's behind other content */
  overflow: hidden;
}

.bg-circle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  animation: float 15s infinite ease-in-out;
}

.bg-circle-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  left: -100px;
  background: rgba(79, 70, 229, 0.2); /* Purple */
}

.bg-circle-2 {
  width: 200px;
  height: 200px;
  bottom: 100px;
  right: -50px;
  background: rgba(239, 68, 68, 0.2); /* Red */
}

.bg-circle-3 {
  width: 400px;
  height: 400px;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4, 120, 87, 0.2); /* Green */
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-20px) translateX(20px) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.5;
  }
}

.header {
  background: var(--header-bg);
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 36px;
  color: #409eff;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info span {
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.user-info span:hover {
  color: #409eff;
}

.logout-btn {
  color: #f56c6c;
  font-size: 14px;
  padding: 0;
  height: auto;
}

.logout-btn:hover {
  color: #f78989;
}

/* .welcome-banner {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
  margin-top: 80px; 
  border-radius: 15px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.welcome-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.welcome-banner h2 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 700;
  color: white;
  position: relative;
  z-index: 1;
}

.welcome-banner p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1; 
}
*/
.main {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 90px; /* Adjust for fixed header */
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
  max-width: 100%;
}

/* 桌面端优化 - 确保卡片水平分布 */
@media (min-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto 30px auto;
    gap: 30px;
  }
  
  .feature-card {
    padding: 35px 30px;
    min-height: 220px;
  }
  
  .feature-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .feature-card p {
    font-size: 16px;
    line-height: 1.7;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto 30px auto;
    gap: 25px;
  }
  
  .feature-card {
    padding: 30px 25px;
    min-height: 200px;
  }
}

.feature-card {
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: center;
  padding: 30px 25px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  position: relative; /* For hover effect */
  overflow: hidden; /* Hide overflow for gradient effect */
  box-shadow: var(--shadow);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 卡片边缘渐变效果（悬停时显示） */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  padding: 2px;
  background: linear-gradient(45deg, #409eff, #67c23a, #e6a23c, #f56c6c);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.feature-card:hover::before {
  opacity: 1;  /* 悬停时显示边缘渐变 */
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.feature-card:hover .card-hover-effect {
  opacity: 1;  /* 悬停时显示内部渐变 */
}

.feature-icon {
  margin-bottom: 20px;
  color: #409eff;
  transition: color 0.3s ease-in-out;
}

.feature-card:hover .feature-icon {
  color: #66b1ff;
}

.feature-card h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: var(--text-primary);
  font-weight: 600;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}
/* 卡片内部渐变遮罩（悬停时显示） */
.card-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: -1;
}

.today-summary {
  max-width: 600px;
  margin: 0 auto;
}

.summary-card {
  border-radius: 15px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.summary-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.refresh-btn {
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.refresh-btn:hover {
  color: #409eff;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-color);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item .label {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}

.summary-item .value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
}

/* 邀请码对话框样式 */
.invite-content {
  padding: 20px 0;
}

.admin-section {
  margin-bottom: 20px;
  padding: 16px;
  background-color: var(--bg-secondary);
  border-radius: 8px;
}

.admin-section h4 {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.admin-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-control span {
  color: var(--text-secondary);
  font-size: 14px;
}

.invite-section {
  margin-bottom: 20px;
}

.invite-section h4 {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.new-invite-code {
  margin-top: 16px;
}

.new-invite-code p {
  margin: 0 0 8px 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.invite-disabled {
  margin-top: 16px;
}

.UploadFilled-card:hover::before {
  opacity: 0; /* 悬停时显示边缘渐变 */
}
  /* 隐藏待更新 */
  .UploadFilled-card {
    display: none;
  }

/* 移动端适配 */
@media (max-width: 768px) {
  /* 仅 5+ App 环境生效（通过标记类精准控制） */
  html.app-5plus .header {
    padding-top: var(--status-bar-height);
    height: calc(55px + var(--status-bar-height));
    
  }
   html.app-5plus .header-content {
   transform: translateY(-15%);;
   
  }
    /* 仅 5+ App 环境生效（通过标记类精准控制） */
    html.app-5plus .main {
    padding-top: 110px;
    margin: 0; /* 取消左右自动居中的margin */
   
  }
  /* 手机web端 */
  .main {
    padding-top: 110px;
    margin: 0; /* 取消左右自动居中的margin */
   
  }

  
  .header-content h1 {
    font-size: 20px;
    justify-content: center;
  }

  ::v-deep .el-dialog{
    width: 90%;
   
  }
  ::v-deep .el-card {
    /* --el-card-padding: 50px; */
     height: 230px;  
  }
   ::v-deep .summary-card {
     --el-card-padding: 14px;
     /* height: 200px;   */
  }




.feature-card:hover::before {
  opacity: 0; /* 悬停时显示边缘渐变 */
}



  .user-info {
    flex-direction: row;
    gap: 8px;
  }
  
  .main {
    padding: 10px;
    padding-top: 60px;
  }
  
  /* .welcome-banner {
    padding: 40px 20px;
    margin-top: 60px;
    border-radius: 10px;
  }
  
  .welcome-banner h2 {
    font-size: 24px;
  }
  
  .welcome-banner p {
    font-size: 16px;
  } */
  
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 100%;
  }
  
  .feature-card {
    /* padding: 20px; */
    min-height: 160px;
  }
  
  .feature-card h3 {
    font-size: 20px;
  }
  
  .feature-card p {
    font-size: 14px;
  }
  
  .bg-circle {
    display: none; /* Hide background circles on mobile */
  }
}

/* 图标颜色样式 */
.calendar-icon {
  color: #409eff;
}

.inner-icon {
  color: #67c23a;
}

.notes-icon {
  color: #e6a23c;
}

.countdown-icon {
  color: #f56c6c;
}

.timer-icon {
  color: #c1df2b;
}

.work-icon {
  color: #9c27b0;
}

.UploadFilled-icon {
  color: #949990;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .bg-circle-1 {
    background: rgba(79, 70, 229, 0.3);
  }
  
  .bg-circle-2 {
    background: rgba(239, 68, 68, 0.3);
  }
  
  .bg-circle-3 {
    background: rgba(4, 120, 87, 0.3);
  }
}

/* 深色主题下的特殊样式 */
.dark-theme .welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dark-theme .bg-circle-1 {
  background: rgba(79, 70, 229, 0.3);
}

.dark-theme .bg-circle-2 {
  background: rgba(239, 68, 68, 0.3);
}

.dark-theme .bg-circle-3 {
  background: rgba(4, 120, 87, 0.3);
}

.dark-theme .feature-card::before {
  background: linear-gradient(45deg, #409eff, #67c23a, #e6a23c, #f56c6c);
}

/* 动画优化 */
/* .feature-card {
  animation: fadeInUp 0.6s ease-out;
} */

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }
.feature-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* 加载动画 */
.feature-card.loading {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
</style>